<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>详情</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        width: 100%;
        /* background-color: beige; */
      }

      ul,
      li {
        list-style: none;
      }

      a {
        text-decoration: none;
        color: #000;
      }

      .det {
        width: 1226px;
        margin: 0 auto;
        display: flex;
      }

      .lef {
        width: 560px;
        height: 560px;
        background-color: beige;
      }

      .lef img {
        width: 560px;
        height: 560px;
        border-radius: 10px;
      }

      .rig {
        width: 600px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        /* background-color: #982626; */
      }

      .rig li {
        margin-left: 30px;
      }

      .rig li:nth-child(4) {
        /* height: 40px;
        width: 100%; */
        display: flex;
        align-items: center;
      }

      .rig li:nth-child(2) {
      }

      .rig li:nth-child(3) {
      }

      .rig li:nth-child(4) i {
        display: inline-block;
        width: 25px;
        height: 25px;
        background-color: cadetblue;
        font-size: 18px;
        color: #fff;
        font-style: normal;
        text-align: center;
        line-height: 25px;
        border-radius: 5px;
      }

      .rig li:nth-child(4) input {
        border: none;
        outline: none;
        width: 30px;
        height: 25px;
        text-align: center;
        line-height: 25px;
      }

      .rig li:nth-child(5) {
        width: 80%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: rgb(255, 106, 0);
        color: #fff;
        font-size: 20px;
        border-radius: 5px;
        background-image: -webkit-gradient(
          linear,
          left 0,
          right 0,
          from(red),
          to(rgb(216, 141, 1))
        );
      }
    </style>
  </head>

  <body>
    <h1>这是详情页</h1>
    <div class="det"></div>
    <script src="./js/axios.js"></script>
    <script>
      let URL = "http://localhost:8888";

      let pid = location.href.split("?")[1].split("=")[1];
      //  console.log(location.href);
      //       console.log(pid);
      // 获取购物车列表
      let num = 1;
      function cartList() {
        axios.defaults.headers.common["Authorization"] =
          localStorage.getItem("token");
        axios.defaults.headers.post["Content-Type"] =
          "application/x-www-form-urlencoded";
        axios
          .get(URL + "/cart/list", {
            params: { id: parseInt(localStorage.getItem("uid")) },
          })
          .then((r) => {
            console.log(r);

            if (r.data.code == 1) {
              let arr = r.data.cart;
              let arr1 = arr.filter((v) => {
                return v.goods_id == pid;
              });
              console.log(arr1);
              if (arr1.length > 0) {
                num = arr1[0].cart_number;
                console.log(arr1, num);
              }
            }
          });
      }
      cartList();

      let det = document.querySelector(".det");

      axios
        .get("http://localhost:8888/goods/item/", {
          params: {
            id: pid,
          },
        })
        .then((r) => {
          let data = r.data;
          console.log(r);
          if (r.data.code == 1) {
            console.log(num);
            det.innerHTML = ` <div class="lef">
        <img src="${data.info.img_big_logo}" alt="">
      </div>
      <ul class="rig">
        <li>${data.info.title}</li>
        <li>原价价格${data.info.price}</li>
        <li>活动价格${data.info.current_price}</li>
   
        <li><span>购买数量：</span><i class="lf">-</i><input type="text" value="${num}" class="ipt"><i class="ri" data-num="">+</i></li>
        <li class="btn">加入购物车</li>
     <li>库存：${data.info.goods_number}</li>

      </ul> `;
          }
          let lf = document.querySelector(".lf");
          let ri = document.querySelector(".ri");
          let ipt = document.querySelector(".ipt");
          // console.log(lf,ri,ipt);
          lf.onclick = function () {
            if (ipt.value > 1) {
              ipt.value -= 1;
            }
          };
          ri.onclick = function () {
            // 这里其实要判断一下库存的数量
            if (ipt.value < 5) {
              ipt.value = ipt.value - 0 + 1;
            } else {
              alert("限购5件");
            }
          };
          let btn = document.querySelector(".btn");

          //

          //
          btn.onclick = function () {
            //  可以在这里写一个是否登录判断
            console.log(localStorage.getItem("uid"));
            axios.defaults.headers.common["Authorization"] =
              localStorage.getItem("token");
            axios.defaults.headers.post["Content-Type"] =
              "application/x-www-form-urlencoded";
            axios
              .post(URL + "/cart/add", {
                id: parseInt(localStorage.getItem("uid")),
                goodsId: pid,
              })
              .then((r) => {
                console.log(r);
                if (r.data.code == 1) {
                  axios
                    .post(URL + "/cart/number", {
                      id: parseInt(localStorage.getItem("uid")),
                      goodsId: pid,
                      number: ipt.value - 0,
                    })
                    .then((res) => {
                      console.log(res);
                      alert("加入购物车成功");
                      ipt.value = 0;
                      location.href = "./cart.html";
                    });
                } else {
                  alert(r.data.message);
                  location.href = "./login.html";
                }
              });
          };
        });
    </script>
  </body>
</html>
